<include file="Public/header1" title="添加账户"   />
<script type="text/javascript" src="__PUBLIC__/js/Validform_v5.3.2_min.js"></script>
<link href="__PUBLIC__/css/validform.css" rel="stylesheet">
<link href="__PUBLIC__/myFilterSelect/css/selectbox.css" type="text/css" rel="stylesheet"/>
<script src="__PUBLIC__/myFilterSelect/js/changtopy.js"></script>
<script src="__PUBLIC__/myFilterSelect/js/getpyszm.js"></script>
<script src="__PUBLIC__/myFilterSelect/js/jquery.multiseselect.js"></script>
<link href="__PUBLIC__/modal/css/bootstrap.min.css" rel="stylesheet">
<script src="__PUBLIC__/modal/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/upload/webuploader.css">
<script src="__PUBLIC__/upload/webuploader.min.js"></script>
<style>
    .multiselect-content{position:relative;width:302px;left:3px;margin:7px 0;border-radius:4px;display:block;max-height:545px}.multiselect-content .multiselectCheckSpan{float:left;margin-left:2px;margin-top:3px}.multiselect-content .multiselectCheckDiv,.multiselect-content .singleSelectCheckDiv{display:block;text-decoration:none;width:100%;line-height:35px;margin:0px;padding-left:8px}.multiselect-content .multiseSelectCheckDiv_hover,.multiselect-content .singleSelectCheckDiv_hover{display:block;border-radius:2px 2px 2px 2px;text-decoration:none;margin:0px;padding-left:12px;background:#418ac7;cursor:pointer;color:#ffffff}.multiselect-content .multiseSelectCheckDiv_select,.multiselect-content .singleSelectCheckDiv_select{display:block;border-radius:2px 2px 2px 2px;text-decoration:none;margin:0px;padding:0px;background:#ddf4ff;cursor:pointer;color:#000000}
</style>

<div class="main">
    <div class="wrap">
        <include file="Public/sidebar" />

        <div class="content-info addReporter">
            <form action="{:U('addUserAction')}" method="post">
            <div class="section">
                <div class="title">基本信息</div>
                <ul>
                    <li>
                        <div class="label"><span class="warning">*</span>真实姓名</div>
                        <input type="text" name="realname" class="info">
                        <span class="text">请输入真实姓名，提交后真实姓名不可修改，请确认姓名正确</span>
                    </li>
                    <li>
                        <div class="label"><span class="warning">*</span>密码</div>
                        <input type="password" name="password" class="info" value="123456">
                        <span class="text">字母，数字或者英文符号，最短6位，区分大小写，默认密码123456</span>
                    </li>
                    <li>
                        <div class="label"><span class="warning">*</span>手机号码</div>
                        <input type="text" name="mobile" id="mobile" class="info ">
                        <span class="text">请输入记者的手机号码，一个手机号码只能注册1个见微记者帐号。</span>
                    </li>
                    <li>
                        <div class="label"><span class="warning">*</span>所属部门</div>
                        <div id="department" class="department"></div>
                        <input type="hidden" name="userchannel" id="departmentId" >
                        <button type="button" class="departmentbtn btn btn-primary" data-toggle="modal" data-target="#channelModal">
                            选择所属部门
                    </button>
                    </li>
                </ul>
            </div>
            <div class="clr"></div>
            <div class="section">
                <div class="title">身份验证</div>
                <ul>

                    <li>
                        <div class="label"><span class="warning">*</span>身份证号码</div>
                        <input type="text" name="idcard" class="info">
                        <span class="text">请输入运营者的身份证号码，一个身份证号码只能注册1个见微帐号。</span>
                    </li>
                    <li>
                        <div class="label"><span class="warning">*</span>手持身份证</div>
                        <div class="part">

                            <div id="filePicker"><img src="__PUBLIC__/img/upload.png" alt="" class="upload imgload" width="200"></div>
                            <div id="preview"></div>
                            <div id="uploadInfo" style="display: none;">上传进度：<span id='progress'></span> | <button class='btn btn-warning btn-sm' type='button' id='fileRest'>重新选择</button></div>

                            <script>
                                var uploader = WebUploader.create({
                                    auto: true,
                                    swf: '__PUBLIC__/upload/Uploader.swf',
                                    server: '{:U("validImg")}',
                                    pick: '#filePicker',
                                    fileNumLimit:1,
                                    accept: {
                                        title: 'Images',
                                        extensions: 'gif,jpg,jpeg,bmp,png',
                                        mimeTypes: 'image/*'
                                    }
                                })

                                uploader.on( 'fileQueued', function( file ) {
                                    $("#filePicker").hide();
                                    uploader.makeThumb( file, function( error, src ) {
                                        $("#uploadInfo").show();
                                        $("#filePicker").hide();
                                        $('#preview').html('<img src="'+src+'" width="200" />');
                                    }, 200, 200 );
                                });

                                $("#fileRest").on('click',function(){
                                    $("#filePicker").show();
                                    $('#preview').empty();
                                    uploader.reset();
                                    $("#uploadInfo").hide();
                                })

                                uploader.on( 'uploadProgress', function( file, percentage ) {
                                    $("#progress").html(Math.ceil(percentage * 100) + '%');
                                });

                                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                                uploader.on( 'uploadSuccess', function( file ,response ) {
                                    $("#submitBTN").prop('disabled',false).addClass('active');
                                    $("#validimg").val(response.info);
                                });

                                // 文件上传失败，显示上传出错。
                                uploader.on( 'uploadError', function( file ) {

                                    $("#submitBTN").prop('disabled',true).removeClass('active');
                                    $("#validimg").val("");
                                    alert('上传失败，稍后重试!');
                                });

                            </script>

                            <input type="hidden" name="validimg" id="validimg" >
                            <div class="text text-info">
                                <p>身份证上所有信息清晰可见，必须能看清证件号</p>
                                <p>照片需要免冠，建议未化妆，手持证件人的五官清晰可见</p>
                                <p>照片内容真实有效，不得做任何修改</p>
                                <p>图片格式必须为：bmp、jpeg、jpg、gif，不可大于5M</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="control">
                <a href="{:U('index')}" class="button back">返回</a>
                <!--button active-->
                <button type="submit" id="submitBTN" disabled class="button submit ">提交</button>
            </div>
            </form>
        </div>
        <div class="clr"></div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="channelModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="whtv-select">
                    <div class="select-list">
                        <select id="whtvSelect" multiple="multiple">
                            <volist name="channel_list" id="channel">
                                <option value="{$channel['chid']}">{$channel['name']}</option>
                            </volist>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="sureDepartmentBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<script>

    $(function(){
            $('#channelModal').on('shown.bs.modal',function(){
                $(".multiselect-img:not(.clicked)").click().addClass('clicked');
                $(".multiselect-content").css("height","554px")
            })

        $("#whtvSelect").multiseSelect({width:'548px'});
        $(".multiselect-input").addClass('info').attr("placeholder","输入部门名字搜索");;
        $(".multiselect-img").hide().click();
        $(".select-list").append($(".multiselect-content"));
        $(".multiselectCheckDiv").click(function(){
            $(this).addClass("multiseSelectCheckDiv_hover").siblings(".multiseSelectCheckDiv_hover").removeClass("multiseSelectCheckDiv_hover");
        });
        $(".multiselectCheckDiv").dblclick(function () {
            $("#sureDepartmentBtn").click();
        })

        $("#sureDepartmentBtn").click(function () {
            if($(".multiseSelectCheckDiv_hover").length==1){
                var value = $(".multiseSelectCheckDiv_hover").find(".multiselectCheckSpan").data("id");
                var text = $(".multiseSelectCheckDiv_hover").find(".multiselectCheckSpan").text();
                $("#departmentId").val(value);
                $("#department").text(text).show();
            }else{
                $("#departmentId").val("");
                $("#department").text("").hide();
            }
            $('#channelModal').modal('hide');
        })

        $(".sidebar").css("height",$(".content-info").height()+80+'px')
        var valiForm=$("form").Validform({
            tiptype:3,
            showAllError:true,
            postonce:true,
            datatype:{
                "zh2-200":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,200}$/,
            },
            beforeSubmit:function(curform){
                var r=false;
                $.ajax({
                    url:"{:U('checkFrontUser')}",
                    data:{mobile:$("#mobile").val()},
                    async:false,
                    success:function(data){
                        if(data==1){
                            r=confirm('此手机已经注册为普通用户，是否确定升级为记者用户？');
                        }else if(data==0){
                            r=true;
                        }
                    }
                })
                return r;
            }
        });

        valiForm.addRule([
            {
                ele:".info:eq(0)",
                datatype:"zh2-200",
                nullmsg:"请填写记者中文姓名",
                errormsg:"请填写2位以上的中文姓名"
            },
            {
                ele:".info:eq(1)",
                datatype:"*6-200",
                nullmsg:"请填写密码",
                errormsg:"密码必须6位以上"
            },
            {
                ele:".info:eq(2)",
                datatype:"m",
                ajaxurl:"{:U('ajaxMobileCheck')}",
                nullmsg:"请填写记者个人手机号",
                errormsg:"手机格式不正确"
            },
            {
                ele:"#departmentId",
                datatype:"n",
                nullmsg:"部门信息不存在",
                errormsg:"部门信息不存在"
            },
            {
                ele:"#validimg",
                datatype:"*",
                nullmsg:"身份证照片未上传",
                errormsg:"身份证照片未上传"
            },
            {
                ele:".info:eq(3)",
                datatype:/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                ajaxurl:"{:U('validateIdCard')}",
                nullmsg:"请填写记者个人身份证号",
                errormsg:"个人身份证号不正确"
            }
        ]);
    })
</script>
<include file="Public/footer" />